// 中部主页显示部分
<template>
  <el-row class="home" :gutter="20">
    <!-- 8列宽度部分（根据组件，总共默认24列宽度） -->
    <el-col :span="8" style="margin-top:20px">
        <el-card shadow="hover">
            <div class="user">
                <img src="../../assets/images/user.png" alt="">
                <div calss="user-info">
                    <p class="name">Admin</p>
                    <p class="role">终极管理员</p>
                </div>
            </div>
            <div class="login-info">
                <p>上次登录时间：<span>2022-7-11</span></p>
                <p>上次登录地点：<span>成都</span></p>
            </div>
        </el-card>

<el-card shadow="hover" style="margin-top:20px" height='450px'>
<el-table :data="tableData">
    <el-table-column
    v-for="(val,key) in tableLabel"
    :key="key"
    :prop="key"
    :label="val"
    >
    </el-table-column>
</el-table>
</el-card >
    </el-col>
<!-- 16列宽度部分 -->
    <el-col :span="16" style="margin-top:20px">
        <div class="num">
            <el-card 
            :body-style="{ display:'flex',padding: 0 }"
            v-for="item in countData"
            :key="item.name"
            >
            <component
             class="icons"
             :is="item.icon"
             :style="{ background: item.color }"
             ></component>
             <div class="details">
                <p class="mun">￥{{item.value}}</p>
                <p class="txt">{{item.name}}</p>
             </div>
            </el-card>
        </div>

        <!-- 200于姐姐 210于宝  200 88 22 收300 出400 亏100  -->

<!-- echarts图标部分 -->
<!-- 折线图 -->
     <el-card style="height: 280px">
        <div ref="echart" style="height:280px"> </div>
     </el-card>
     <!-- 柱状图 -->
     <div class="graph">
        <el-card style="height:260px">
        <div ref="userechart" style="height:240px"></div>
    </el-card>
           <!-- 饼状图 -->
        <el-card style="height:260px">
            <div ref="videoechart" style="height:240px"></div>
        </el-card>
     </div>
  



    </el-col>
  </el-row>
</template>

<script>
import { defineComponent,getCurrentInstance,onMounted,reactive,ref } from 'vue'
import axios from "axios";
import *as echarts from 'echarts'

export default defineComponent({
    setup() {
        const {proxy} =getCurrentInstance();
        let tableData= ref([

        //   {
        //     name: 'oppo',
        //     todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   },
        //   {
        //     name: 'vivo',
        //     todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   },
        //   {
        //     name: '苹果',
        //     todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   },
        //   {
        //     name: '小米',
        //     todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   },
        //   {
        //     name: '三星',
        //     todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   },
        //   {
        //     name: '魅族',
        //    todayBuy: 100,
        //     monthBuy: 300,
        //     totalBuy: 800
        //   }
        ]);
        let countData=ref([]);
        const tableLabel={
            name:"课程",
            totalBuy:"今日购买",
            monthBuy:"本月购买",
            totalBuy:"总购买",
        };
        // 为了发送axios请求
        const getTableList=async()=>{
            // await axios
        //   console.log(res);
        //     // 本地mock
            // .get("/home/getData")

        // //   线上mock
        // .get("https://www.fastmock.site/mock/1a57c9dc507c9a5c74246cf8d61825b2/api/home/getTableData")

            
            
        //     .then((res)=>{
        //        console.log(res); 
        //     //    线上mock
        

        //     if(res.data.code==200){
        //         tableData.value=res.data.data;
        //     }
        //     //    本地mock
            // tableData.value=res.data.data.tableData;
        //     });

        let res =await proxy.$api.getTableData();
        tableData.value=res;
        };

        // 获取首页count数据
        const getCountData =async()=>{
            let res=await proxy.$api.getCountData();
            countData.value=res;
            // console.log(res);
        };
        onMounted(()=>{
            getTableList();
            getCountData();
            // 获取eachrts数据
            getChartData();
        })

// 关于echarts表格的配置渲染部分
let xOptions=reactive({
            // 图例文字颜色
            textStyle: {
              color: "#333",
            },
          grid: {
            left: "20%",
          },
          // 提示框
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category", // 类目轴
            data: [],
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#333",
            },
          },
          yAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#17b3a3",
                },
              },
            },
          ],
          color: ["#2ec7c9", "#b6a2de"],
          series: [],
        },
    )
// 饼状图的配置
let pieOptions=reactive({
          tooltip: {
            trigger: "item",
          },
          color: [
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#e1bb22",
            "#39c362",
            "#3ed1cf",
          ],
          series: [],
        }
)
// 折线图的配置

// 图的数据部分
let orderData=reactive({
    xData:[],
    series:[]
});
let userData =reactive({
    xData:[],
    series:[]
});
let videoData =reactive({
    series:[]
});
// echarts获取数据
const getChartData=async()=>{
    let result=await proxy.$api.getChartData();
    console.log(result);

    let res =result.orderData
    let userRes=result.userData
    let videoRes=result.videoData
    // console.log(res.data[0]);
    // console.log(userRes);
    // console.log(videoData);
    orderData.xData=res.date;
    const keyArrayl=Object.keys(res.data[0]);
    const series=[];
    keyArray.forEach((key)=>{
        series.push({
            name:key,
            data:res.data.map((item)=>item[key]),
            type:"line",
        })
    })
    orderData.series=series;
    xOptions.xAxis.data=orderData.xData;
    xOptions.series=orderData.series;

    // 折线图进行渲染
    let hEcharts=echarts.init(proxy.$refs["echart"]);
    hEcharts.setOption(xOptions);

      // 柱状图进行渲染的过程
      userData.xData = userRes.map((item) => item.date);
      userData.series = [
        {
          name: "新增用户",
          data: userRes.map((item) => item.new),
          type: "bar",
        },
        {
          name: "活跃用户",
          data: userRes.map((item) => item.active),
          type: "bar",
        },
      ];

      xOptions.xAxis.data = userData.xData;
      xOptions.series = userData.series;
      let uEcharts = echarts.init(proxy.$refs["userechart"]);
      uEcharts.setOption(xOptions);
      videoData.series = [
        {
          data: videoRes,
          type: "pie",
        },
      ];
      pieOptions.series = videoData.series;
      let vEcharts = echarts.init(proxy.$refs["videoechart"]);
      vEcharts.setOption(pieOptions);
 
};
// 上一步开始有问题
// 报错是Uncaught ReferenceError: key is not defined，我怀疑是数组在apifox定义漏掉了某些数据 14:53

        return{
            tableData,
            tableLabel,
            countData,
        }

    },
})
</script>


<style lang="less" scoped>
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
  }
  .login-info {
    p {
      line-height: 30px;
      font-size: 14px;
      color: #999;
      span {
        color: #666;
        margin-left: 60px;
      }
    }
  }
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }
    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt {
        font-size: 14px;
        text-align: center;
        color: #999;
      }
    }
  }
  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card {
      width: 48%;
    }
  }
}
</style>
